<template>
	<view class="contain">
		<view class="contain1">
			<!-- 标题 -->
			<view class="title">
				<van-icon name="arrow-left" @click="goback()" />
				<view>
					<image :src="goodsArr[0].commodityImg" class="imgage1"></image>
				</view>
				<view class="text1">
					<view>{{goodsArr[0].commodityName}}</view>
					<view>{{goodsArr[0].address}}</view>
				</view>
				<view>
					<van-tag round type="primary">潮流款式</van-tag>
				</view>
				<view style="margin-left: 100rpx;">
					<button class="button1" :class="{buttonColor}" @click="collectStore2()">关注</button>
				</view>
			</view>

			<!-- 价格 -->
			<view class="price1">
				<text>￥{{goodsArr[0].currentPrice}}</text>
				<text style="text-decoration: line-through; color: gray;">￥{{goodsArr[0].originalPrice}}</text>
				<text style="margin-left: 20rpx; color: rgb(25,137,250)">包邮</text>
				<view>
					<van-tag plain type="primary" color="red">咸鱼币抵0.83元</van-tag>
				</view>
			</view>

			<view class="introduce1">
				{{goodsArr[0].describe}}
			</view>

			<!-- 主图 -->
			<view class="content1">
				<image class="image1" :src="goodsArr[0].commodityImg" @click="clickImg(0)"></image>
			</view>

			<!-- 详情图 -->
			<view class="content2">
				<image class="image1" :src="goodsArr[1].imgUrl" @click="clickImg(1)"></image>
				<image class="image1" :src="goodsArr[2].imgUrl" @click="clickImg(2)"></image>
				<image class="image1" :src="goodsArr[3].imgUrl" @click="clickImg(3)"></image>
				<image class="image1" :src="goodsArr[4].imgUrl" @click="clickImg(4)"></image>
			</view>


			<!-- 评价 出价-->
			<view style="margin-top: 50rpx; width: 50%;">
				<van-tabs :active="active " @change="onChange">
					<van-tab title="评价">
						<view class="content3" v-for="(item,index) in contentsArr" :key="index">
							<view>
								<image :src="item.userPhoto" class="img2"></image>
							</view>
						 <view>
								<p>{{item.sellerTel}}</p>
								<p>{{item.commentsToSeller}}</p>
							</view>
						</view>
					</van-tab>
					<van-tab title="出价">
						<van-empty image="search" description="暂时还没有人出价" />
					</van-tab>
				</van-tabs>
			</view>
		</view>


		<!-- 底部 -->
		<view class="footer">
			<view style="margin-left: 40rpx;">
				<van-icon name="chat-o" style="margin-left: 13rpx;" />
				<p @click='gochat()'>联系</p>
			</view>
			<view style="margin-left: 160rpx;">
				<van-icon name="star-o" style="margin-left: 13rpx;" />
				<p>收藏</p>
			</view>
			<view style="margin-left: 170rpx;">
				<van-button round type="info" color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="buy
">立即购买</van-button>
			</view>
		</view>



	</view>
</template>

<script>
	import request from '../../com/request.js'
	export default {
		data() {
			return {
				active: 0, //标签页切换的值
				goodsArr: [], //商品数组
				contentsArr: [], //评论数组
				buttonColor: false //关注按钮颜色
			}
		},
		methods: {
			buy() {
				console.log(111)
				uni.navigateTo({
					url: "/pages/pay/pay",
				})
			},
			// 标签页切换
			onChange(event) {
				this.active = `${event.detail.name}`
				console.log(this.active, 80)
			},
			gochat(){
				uni.navigateTo({
					url: `/pages/chatpage/chatpage?receiverPhone=${uni.getStorageSync("hx220408userTel")}`
				})
				
			},
			// 点击图片放大
			clickImg(n) {
				if (n == 0) {
					wx.previewImage({
						urls: [
							this.goodsArr[0].commodityImg
						], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: [], // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else if (n == 1) {
					wx.previewImage({
						urls: [
							this.goodsArr[1].imgUrl
						], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: [], // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else if (n == 2) {
					wx.previewImage({
						urls: [
							this.goodsArr[2].imgUrl
						], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: [], // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else if (n == 3) {
					wx.previewImage({
						urls: [
							this.goodsArr[3].imgUrl
						], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: [], // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else if (n == 4) {
					wx.previewImage({
						urls: [
							this.goodsArr[4].imgUrl
						], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: [], // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				}

			},
			//拿到商品详情表数据
			getGoodsData() {
				var that = this
				request({
					url: "api/imgTable/get",
					data: {
						commodityId: uni.getStorageSync("hx220408commodityId")
					},
					method: "GET",
					dataType: "json",
					success: function(resp) {
						that.goodsArr = resp.data.data
						console.log(that.goodsArr, 118)



					}
				})
			},

			// 拿到评价内容
			contents() {
				var that = this
				request({
					url: "api/selectEvaluate/get",
					data: {
						acc: uni.getStorageSync("hx220408userTel")
					},
					method: "GET",
					dataType: "json",
					success: function(resp) {
						console.log(resp.data.data, 164)
						that.contentsArr = resp.data.data

					}
				})
			},

			// 收藏店铺
			collectStore1() {
				var that = this
				request({
					url: "api/collectStore1/get",
					data: {
						beFocuson: uni.getStorageSync("hx220408userTel"), //卖家电话
						follower: "13255089557" //买家电话
					},
					method: "GET",
					dataType: "json",
					success: function(resp) {
						if (resp.data.data.length > 0) {
							that.buttonColor = true
						} else {
							that.buttonColor = false
						}

					},

				})
			},


			collectStore2() {
				var that = this
				request({
					url: "api/collectStore2/get",
					data: {
						beFocuson: uni.getStorageSync("hx220408userTel"), //卖家电话
						follower: "13255089557" //买家电话
					},
					method: "GET",
					dataType: "json",
					success: function(resp) {
						console.log(resp.data, 211)
						if (that.buttonColor == true) {
							that.buttonColor = false
							uni.showToast({
								title: '取消关注成功',
								duration: 500,
								icon: "none"
							});

						} else if (that.buttonColor == false) {
							that.buttonColor = true
							uni.showToast({
								title: '关注成功',
								duration: 500,
								icon: "none"
							});
						}
					},

				})
			},
			// 返回搜索页
			goback() {
				uni.navigateTo({
					url: "/pages/search/search",
				})
			}


		},
		onLoad() {
			this.getGoodsData()
			this.contents()
			this.collectStore1()
		}
	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.contain {
		width: 100%;
		margin-top: 180rpx;
		margin-left: 20rpx;
	}

	/* 标题 */
	.title {
		display: flex;
	}

	.imgage1 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	/* .text1 {
		margin-left: 10rpx;
	} */

	.text1>view:nth-child(1) {
		font-weight: bold;
		width: 250rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

	.text1>view:nth-child(2) {
		margin-top: 10rpx;
		color: darkgrey;
		width: 250rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* 关注按钮 */
	.button1 {
		margin-left: 7rpx;
		margin-top: 10rpx;
		width: 150rpx;
		height: 63rpx;
		line-height: 63rpx;
		border-radius: 63rpx;
	}

	.button1::after {
		border: none;
	}

	/* 价格 */
	.price1 {
		margin-top: 50rpx;
	}

	.price1>text:nth-child(1) {
		color: red;
		font-weight: bold;
		font-size: 50rpx;
	}

	.price1>text:nth-child(2) {
		margin-left: 20rpx;
		color: dodgerblue;
	}

	.price1>view {
		margin-top: 20rpx;
	}

	/* 介绍 */
	.introduce1 {
		width: 85%;
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	/* 主图片点击放大 */
	.content1 {
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image1 {
		height: 700rpx;
		width: 90%;
		/* margin-top: 40rpx; */
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	/* 详情图 */
	.content2 {
		width: 95%;
		display: flex;
		flex-wrap: wrap;
	}

	.content2>image {
		width: 40%;
		height: 300rpx;
		margin-left: 20rpx;
	}

	/* 评价头像 */
	.img2 {
		margin-left: 40rpx;
		margin-top: 20rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 30px
	}

	.content3 {
		display: flex;
		margin-top: 20rpx;
	}

	.content3>view:nth-child(2) {
		margin-top: 20rpx;
		margin-left: 10rpx;
	}


	.contain1 {
		padding-bottom: 150rpx;
	}

	/* 底部 */
	.footer {
		width: 1000rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		background-color: white;
	}

	/* 关注按钮颜色 */
	.buttonColor {
		background-color: orangered;
		color: white
	}
</style>
